<!--
    页面名称：员工 - 查看自己的信息
    作者: 苗怀雨
    时间:2018-1-23 22:24:28
-->

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="tag" tagdir="/WEB-INF/tags" %>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html>
<tag:head title="${requestScope.staff.name}的信息" ctx="${ctx}">
	<!-- Switchery -->
	<link href="${ctx}/assets/css/switchery/switchery.min.css" rel="stylesheet">
</tag:head>

<tag:body>
	<!-- 左 上 导航 -->
	<tag:nav ctx="${ctx}"></tag:nav>

	<!-- page content -->
	<tag:content title="${requestScope.staff.name}的信息">
		<div class="row tile_count">
			<div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
				<span class="count_top"><i class="fa fa-user"></i> 借阅总数</span>
				<div class="count">${requestScope.count.borrowCount}</div>
			</div>
			<div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
				<span class="count_top"><i class="fa fa-user"></i> 检索总次数</span>
				<div class="count green">${requestScope.count.searchCount}</div>
			</div>
			<div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
				<span class="count_top"><i class="fa fa-user"></i>违规总次数</span>
				<div class="count red">${requestScope.paymentCounts}次</div>
			</div>
		</div>
		<div class="col-md-12 col-sm-12">
			<div class="col-md-12 col-sm-12 col-xs-12">
				<div class="x_panel">
					<div class="x_title">
						<h2>活跃度 <small>5个月</small></h2>
						<div class="clearfix"></div>
					</div>
					<div class="x_content2">
						<div id="graph_line" style="width:100%; height:300px;"></div>
					</div>
				</div>
			</div>
			<div class="col-md-4 col-sm-4 col-xs-12">
				<div class="x_panel tile fixed_height_320 overflow_hidden">
					<div class="x_title">
						<h2>科目热度统计</h2>
						<div class="clearfix"></div>
					</div>
					<div class="x_content">
						<table class="" style="width:100%">
							<tr>
								<th style="width:37%;">
									<p>Top 5</p>
								</th>
								<th>
									<div class="col-lg-7 col-md-7 col-sm-7 col-xs-7">
										<p class="">类名</p>
									</div>
									<div class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
										<p class="">分数</p>
									</div>
								</th>
							</tr>
							<tr>
								<td>
									<canvas id="canvas1" height="140" width="140" style="margin: 15px 10px 10px 0"></canvas>
								</td>
								<td>
									<table class="tile_info">
										<c:forEach items="${requestScope.statistics}" var="statistic">
											<tr>
												<td>
													<p><i class="statistic fa fa-square"></i>${statistic.bookClass.name}</p>
												</td>
												<td>${statistic.percentage}%</td>
											</tr>
										</c:forEach>
									</table>
								</td>
							</tr>
						</table>
					</div>
				</div>
			</div>
			<div class="col-md-4 col-sm-4 col-xs-12">
				<div class="x_panel">
					<div class="x_title">
						<h2>科目热度统计</h2>
						<div class="clearfix"></div>
					</div>
					<div class="x_content">

						<div id="echart_pie" style="height:350px;"></div>

					</div>
				</div>
			</div>
		</div>
	</tag:content>
	<!-- /page content -->

	<!-- footer content -->
	<tag:footer></tag:footer>

</tag:body>

<!-- javascript-->
<tag:javascript ctx="${ctx}">
	<script src="${ctx}/assets/js/staff/staff_staff_info/staff_staff_info.js"></script>	<!-- this page -->
	<!-- ECharts -->
	<script src="${ctx}/assets/js/Chart.js/dist/Chart.js"></script>
	<script src="${ctx}/assets/js/echarts/dist/echarts.min.js"></script>
	<script src="${ctx}/assets/js/echarts/map/js/world.js"></script>
    <!-- morris.js -->
    <script src="${ctx}/assets/js/raphael/raphael.min.js"></script>
    <script src="${ctx}/assets/js/morris.js/morris.min.js"></script>
	<script>
		$("select").val(${requestScope.staff.role.roleId});
		$(document).ready(function () {
			<c:if test="${requestScope.lastMonthCount != null}">
			appendContrastElem($("#staffCount"),${requestScope.presentMonthCount.staffCount},${requestScope.lastMonthCount.staffCount});
			appendContrastElem($("#bookCount"),${requestScope.presentMonthCount.bookCount},${requestScope.lastMonthCount.bookCount});
			appendContrastElem($("#borrowCount"),${requestScope.presentMonthCount.borrowCount},${requestScope.lastMonthCount.borrowCount});
			appendContrastElem($("#evaluateCount"),${requestScope.presentMonthCount.evaluateCount},${requestScope.lastMonthCount.evaluateCount});
			appendContrastElem($("#paymentCount"),${requestScope.presentMonthCount.paymentCount},${requestScope.lastMonthCount.paymentCount});
			appendContrastElem($("#searchCount"),${requestScope.presentMonthCount.searchCount},${requestScope.lastMonthCount.searchCount});
			</c:if>

			var $statisticElem = $("i.statistic");

			for(var i = 0; i < $statisticElem.length;++i){
				switch(i)
				{
					case 0:
						$statisticElem.eq(i).addClass("blue");
						break;
					case 1:
						$statisticElem.eq(i).addClass("green");
						break;
					case 2:
						$statisticElem.eq(i).addClass("purple");
						break;
					case 3:
						$statisticElem.eq(i).addClass("aero");
						break;
					case 4:
						$statisticElem.eq(i).addClass("red");
						break;
				}
			}

		});

		var $ascElem = $("<span class='count_bottom'> <i class='green'><i class='fa fa-sort-asc'></i></i>" +
				"From last Week</span>");
		var $descElem = $("<span class='count_bottom'> <i class='red'><i class='fa fa-sort-desc'></i></i>" +
				"From last Week</span>");

		function appendContrastElem(e,num1,num2) {
			if(num1 > num2){
				$(e).append($ascElem.clone().children("i").append(toDecimal2((num1 - num2)/num2)*100 + "%").parent());
			}else{
				$(e).append($descElem.clone().children("i").append(toDecimal2((num2 - num1)/num2)*100 + "%").parent());
			}
		}

		//保留两位小数
		function toDecimal2(x) {
			var f = parseFloat(x);
			if (isNaN(f)) {
				return false;
			}
			var f = Math.round(x*100)/100;
			var s = f.toString();
			var rs = s.indexOf('.');
			if (rs < 0) {
				rs = s.length;
				s += '.';
			}
			while (s.length <= rs + 2) {
				s += '0';
			}
			return s;
		}
	</script>
	<!-- Doughnut Chart -->
	<script>
		$(document).ready(function(){
			var options = {
				legend: false,
				responsive: false
			};

			new Chart(document.getElementById("canvas1"), {
				type: 'doughnut',
				tooltipFillColor: "rgba(51, 51, 51, 0.55)",
				data: {
					labels: [
						<c:forEach items="${requestScope.statistics}" var="statistic">
							"${statistic.bookClass.name}",
						</c:forEach>
					],
					datasets: [{
						data: [
							<c:forEach items="${requestScope.statistics}" var="statistic">
							${statistic.percentage},
							</c:forEach>
						],
						backgroundColor: [
							"#3498DB",
							"#26B99A",
							"#9B59B6",
							"#BDC3C7",
							"#E74C3C",
						],
						hoverBackgroundColor: [
							"#49A9EA",
							"#36CAAB",
							"#B370CF",
							"#CFD4D8",
							"#E95E4F",
						]
					}]
				},
				options: options
			});
		});

		var theme = {
			color: [
				'#26B99A', '#34495E', '#BDC3C7', '#3498DB',
				'#9B59B6', '#8abb6f', '#759c6a', '#bfd3b7'
			],

			title: {
				itemGap: 8,
				textStyle: {
					fontWeight: 'normal',
					color: '#408829'
				}
			},

			dataRange: {
				color: ['#1f610a', '#97b58d']
			},

			toolbox: {
				color: ['#408829', '#408829', '#408829', '#408829']
			},

			tooltip: {
				backgroundColor: 'rgba(0,0,0,0.5)',
				axisPointer: {
					type: 'line',
					lineStyle: {
						color: '#408829',
						type: 'dashed'
					},
					crossStyle: {
						color: '#408829'
					},
					shadowStyle: {
						color: 'rgba(200,200,200,0.3)'
					}
				}
			},

			dataZoom: {
				dataBackgroundColor: '#eee',
				fillerColor: 'rgba(64,136,41,0.2)',
				handleColor: '#408829'
			},
			grid: {
				borderWidth: 0
			},

			categoryAxis: {
				axisLine: {
					lineStyle: {
						color: '#408829'
					}
				},
				splitLine: {
					lineStyle: {
						color: ['#eee']
					}
				}
			},

			valueAxis: {
				axisLine: {
					lineStyle: {
						color: '#408829'
					}
				},
				splitArea: {
					show: true,
					areaStyle: {
						color: ['rgba(250,250,250,0.1)', 'rgba(200,200,200,0.1)']
					}
				},
				splitLine: {
					lineStyle: {
						color: ['#eee']
					}
				}
			},
			timeline: {
				lineStyle: {
					color: '#408829'
				},
				controlStyle: {
					normal: {color: '#408829'},
					emphasis: {color: '#408829'}
				}
			},

			k: {
				itemStyle: {
					normal: {
						color: '#68a54a',
						color0: '#a9cba2',
						lineStyle: {
							width: 1,
							color: '#408829',
							color0: '#86b379'
						}
					}
				}
			},
			map: {
				itemStyle: {
					normal: {
						areaStyle: {
							color: '#ddd'
						},
						label: {
							textStyle: {
								color: '#c12e34'
							}
						}
					},
					emphasis: {
						areaStyle: {
							color: '#99d2dd'
						},
						label: {
							textStyle: {
								color: '#c12e34'
							}
						}
					}
				}
			},
			force: {
				itemStyle: {
					normal: {
						linkStyle: {
							strokeColor: '#408829'
						}
					}
				}
			},
			chord: {
				padding: 4,
				itemStyle: {
					normal: {
						lineStyle: {
							width: 1,
							color: 'rgba(128, 128, 128, 0.5)'
						},
						chordStyle: {
							lineStyle: {
								width: 1,
								color: 'rgba(128, 128, 128, 0.5)'
							}
						}
					},
					emphasis: {
						lineStyle: {
							width: 1,
							color: 'rgba(128, 128, 128, 0.5)'
						},
						chordStyle: {
							lineStyle: {
								width: 1,
								color: 'rgba(128, 128, 128, 0.5)'
							}
						}
					}
				}
			},
			gauge: {
				startAngle: 225,
				endAngle: -45,
				axisLine: {
					show: true,
					lineStyle: {
						color: [[0.2, '#86b379'], [0.8, '#68a54a'], [1, '#408829']],
						width: 8
					}
				},
				axisTick: {
					splitNumber: 10,
					length: 12,
					lineStyle: {
						color: 'auto'
					}
				},
				axisLabel: {
					textStyle: {
						color: 'auto'
					}
				},
				splitLine: {
					length: 18,
					lineStyle: {
						color: 'auto'
					}
				},
				pointer: {
					length: '90%',
					color: 'auto'
				},
				title: {
					textStyle: {
						color: '#333'
					}
				},
				detail: {
					textStyle: {
						color: 'auto'
					}
				}
			},
			textStyle: {
				fontFamily: 'Arial, Verdana, sans-serif'
			}
		};
		var echartPie = echarts.init(document.getElementById('echart_pie'), theme);

		echartPie.setOption({
			tooltip: {
				trigger: 'item',
				formatter: "{a} <br/>{b} : {c} ({d}%)"
			},
			legend: {
				x: 'center',
				y: 'bottom',
				data: ['Direct Access', 'E-mail Marketing', 'Union Ad', 'Video Ads', 'Search Engine']
			},
			toolbox: {
				show: true,
				feature: {
					magicType: {
						show: true,
						type: ['pie', 'funnel'],
						option: {
							funnel: {
								x: '25%',
								width: '50%',
								funnelAlign: 'left',
								max: 1548
							}
						}
					},
					restore: {
						show: false,
						title: "Restore"
					},
					saveAsImage: {
						show: false,
						title: "Save Image"
					}
				}
			},
			calculable: true,
			series: [{
				name: '访问来源',
				type: 'pie',
				radius: '55%',
				center: ['50%', '48%'],
				data: [
					<c:forEach items="${requestScope.statistics}" var="statistic">
					{
						value: ${statistic.percentage},
						name: '${statistic.bookClass.name}'
					},
					</c:forEach>
				]
			}]
		});

		Morris.Line({
			element: 'graph_line',
			xkey: 'month',
			ykeys: ['value'],
			labels: ['Value'],
			hideHover: 'auto',
			lineColors: ['#26B99A', '#34495E', '#ACADAC', '#3498DB'],
			data: [
				<c:forEach items="${requestScope.counts}" var="count">
				{month:'${count.date}',value:parseInt(${count.borrowCount * 0.8 + count.searchCount * 0.2})},
				</c:forEach>
//				{year: '2012', value: 20},
//				{year: '2013', value: 10},
//				{year: '2014', value: 5},
//				{year: '2015', value: 5},
//				{year: '2016', value: 20}
			],
			resize: true
		});
	</script>
</tag:javascript>
</html>
